<template>
    <div class="top-toolbar app-no-drag d-flex align-items_center no-select">
        <div class="title">{{title}}</div>
        <div class="top flex_1 app-drag"></div>
        <div class="toolbar">
            <i class="iconfont icon-zuixiaohua1" @click="minimize"></i>
            <i class="iconfont" :class="[this.isMaxed ? 'icon-zuidahua1' : 'icon-zuidahua-zdy' ]" @click="maximize"></i>
            <i class="iconfont icon-guanbi" @click="close"></i>
        </div>
    </div>
</template>

<script>
    import {ipcRenderer,remote} from 'electron'

    export default {
        name: "top-toolbar",
        data(){
            return {
                isMaxed: false,
                title: remote.getCurrentWindow().getTitle()
            }
        },
        mounted: function () {
            this.$nextTick(() => {
                this.app = document.querySelector('#app')
            })
            const win = remote.getCurrentWindow()
            win.on('unmaximize', (event, arg) => {
                this.app.classList.add("b-r")
                this.isMaxed = false
            })
            win.on('maximize', (event, arg) => {
                this.app.classList.remove("b-r")
                this.isMaxed = true
            })
        },
        methods:{
            minimize(){
                ipcRenderer.send('window-all-minimize')
            },
            maximize(){
                // console.log("isMaxed: "+this.isMaxed)
                ipcRenderer.send('window-all-maximize')
            },
            close(){
                ipcRenderer.send('window-all-closed')
            }
        }
    }
</script>
<style scoped lang="css">
@import "../../assets/css/iconfont/iconfont.css";
</style>
<style scoped lang="sass">
@import "../../assets/sass/common"

.top-toolbar
    padding: 4px
    height: 36px
    width: 100%
    background-color: $primary-color
    .title
        margin-left: 10px
        color: #ffffff
    .top
        height: 100%
    .toolbar
        color: white
        margin-right: 5px
        .iconfont
            font-size: 14px
            margin: 0 5px
            &:hover
                color: #b7b7b7
                cursor: pointer


</style>
